<template>
  <div class="list">
    <div class="item-c">
        <div class="item">
          <a-input type="text" placeholder="验证码" v-model="yzm" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
            <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input>
      </div>
      <div class="item">
        <a-button 
        class="getCaptcha"
        tabindex="-1"
        :disabled="state.smsSendBtn"
        @click.stop.prevent="getCaptcha"
        v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
       </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        yzm: '',
        form: this.$form.createForm(this),
        state: {
          time: 60,
          loginBtn: false,
          loginType: 0,
          smsSendBtn: false
        }
      };
    },
    props: {
      value: {
        type: Object | Array,
        default () {
          return {}
        }
      },
      options: {
        type: Object,
        default () {
          return {
            margin: true,
            margin_top: true,
            height: false,
            radius: false
          }
        }
      }
    },
    mounted() {},
    watch: {
      value(val) {
        if (val == false) {
          val = {}
        }
        this.yzm = val || ''
      },
      yzm(val) {
        if (val == false) {
          this.$emit('input', '')
        } else {
          this.$emit('input', this.yzm)
        }
      }
    },
    methods: {
      getCaptcha (e) {
        e.preventDefault()
        const { form: { validateFields }, state } = this

        validateFields(['mobile'], { force: true }, (err, values) => {
          if (!err) {
            state.smsSendBtn = true

            const interval = window.setInterval(() => {
              if (state.time-- <= 0) {
                state.time = 60
                state.smsSendBtn = false
                window.clearInterval(interval)
              }
            }, 1000)

            const hide = this.$message.loading('验证码发送中..', 0)
            this.$http.get('get_up_code').then(res => {
              setTimeout(hide, 2500)
            }).catch(err => {
              setTimeout(hide, 1)
              clearInterval(interval)
              state.time = 60
              state.smsSendBtn = false
              this.requestFailed(err)
            })
          }
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .code-box-demo .ant-slider {
    margin-bottom: 16px;
  }

  .list {

    display: flex;
    flex-direction: column;

    .item-c {
      display: flex;

      margin-top: 4px;
    }

    .item {
      // border: 1px solid red;
      // float: left;
      display: flex;
      align-items: center;
      // width: 300px;
      flex: 0 0 160px;
      // margin-bottom: 10px;

      .key {
        font-weight: 500;
        margin-right: 6px;
        width: 70px;
        flex: 0 0 70px;
        text-align: right;
      }

      .slider {
        width: 100px;
        flex: 0 0 100px;
        margin-right: 20px;
      }
    }
  }
</style>
<style lang="less" scoped>
.user-layout-login {
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }
}
</style>